<extend name="Public/base"/>
<block name="head">
	<link href="__MOBILE__/css/article.css" rel="stylesheet">
</block>
<block name="body">
	<include file="Public:category" />
	<div class="container" >
        
		
		
        <div class="row article">
			<div class="col-sm-12 list">
				<div id="ajax-article-list">
					<article:list name="list" row="12" category="$category['id']" child="true">					
						<div class="col-sm-12 item">
								<a href="{:U('Article/detail?id='.$list['id'])}">
									
									<img class="lazy img-responsive "alt="{$list.title}" src="{$list.cover_id|get_cover=path}">
								</a>
								<div class="info">
									<a href="{:U('Article/detail?id='.$list['id'])}">
										<h4 class="title">
										{$list.title}
										</h4>
									</a>
								</div>
								<div class="view">
									<i class="glyphicon glyphicon-eye-open"></i>
											{$list.view}
								</div>								
						
						</div>
					</article:list>
				</div>
				<button id="next" class="btn" p="2" total-page="{$total_page}">
					点击加载更多
				</button>
				
				

			</div>
	
        </div>
    </div>
</block>
<block name="script">
	 
	 $(function(){   
		  $('#next').click(function(){
		  	LoadPage();  
		  }); 
		  
	}); 
	function LoadPage(){
		var currentPage = $('#next').attr('p') ? $('#next').attr('p') : 1;
		$.get("{:U('Article/ajaxArticleList?category='.$id)}",{p:currentPage},function(result){
			if(result.errno==0){
				$('#ajax-article-list').append(result.content);
				$('#next').attr('p',result.p);
				if(result.p>=$('#next').attr('total-page')){
					$('#next').html('木有了，亲');
					$('#next').attr('disabled',true);
					$('#next').addClass('disabled');
				}
			}
			
		},'json');	
	}
</block>